<template>
  <div class="index">
    <NavBar title="首页"></NavBar>
    <p class="channles" @click="changeChannels">
    </p>
    <van-popup v-model="isShow" position="bottom" :style="{ height: '70%' }" class="channle">
      <p>我的频道 <span @click="deleteChannel">编辑</span> </p>
      <ul>
        <li v-for="(item,index) in userList" :key="index"><i class="iconfont icon-guanbi close" v-show="isDel"  @click="del(index)"></i>{{item.name}}</li>
      </ul>
      <p>频道推荐</p>
      <ul>
        <li v-for="(item,index) in reChannels" :key="index" @click="add(index, item)">{{item.name}}</li>
      </ul>
    </van-popup>
    <div class="content">
      <van-tabs v-model="active" class="tabs" @click="skip(active)">
        <van-tab
        :title="item.name"
        v-for="(item, index) in userList"
        :key="index"
        >
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            >
              <articlesItem v-for="(item,index) in articlesList" :key="index" :title="item.title" :aut_name='item.aut_name' :comm_count="item.comm_count" :pubdate="item.pubdate" :images='item.cover.images' :art_id='item.art_id' :aut_id="item.aut_id"></articlesItem>
            </van-list>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>
    </div>
    <div class="bottom"></div>
  </div>
</template>

<script>
import { userChannels, articles, allChannels, delChannels } from '@/api/index.js'
import articlesItem from './articlesItem'
import { Toast } from 'vant'
export default {
  components: {
    articlesItem
  },
  data () {
    return {
      // 默认选中频道
      active: 0,
      // 用户频道
      userList: [],
      // 频道文章列表
      articlesList: [],
      // 时间戳
      timestamp: 0,
      // 文章置顶
      with_top: 0,
      // 封面图片
      images: [],
      // 文章id
      art_id: 0,
      // 下拉刷新加载
      refreshing: false,
      // 上拉加载
      loading: false,
      // 数据加载完毕
      finished: false,
      // 加载列表
      list: [],
      // 作者id
      aut_id: 0,
      // 频道切换
      isShow: false,
      // 所有频道
      AllList: [],
      // 推荐频道
      reChannels: [],
      // 编辑按钮
      isDel: false
    }
  },
  async created () {
    // 获取用户频道
    const res = await userChannels()
    this.userList = res.data.data.channels

    // 获取频道文章列表
    this.onLoadArticles()
  },
  methods: {
    async onLoadArticles () {
      const res2 = await articles({
        channel_id: this.active,
        timestamp: +new Date(),
        with_top: 1
      })
      this.articlesList = res2.data.data.results
    },
    // 切换频道
    skip (active) {
      this.active = active
      this.articlesList = []
      this.onLoadArticles()
    },
    // 上拉加载
    async onLoad () {
      const res2 = await articles({
        channel_id: this.active,
        timestamp: +new Date(),
        with_top: 1
      })
      this.list = res2.data.data.results
      // 往数组尾部添加数据
      this.articlesList.push([...this.list])
    },
    // 下拉刷新
    onRefresh () {
      this.onLoadArticles()
      setTimeout(() => {
        Toast('刷新成功')
        this.refreshing = false
      }, 500)
    },
    // 更改频道
    async changeChannels () {
      this.reChannels = []
      this.isShow = true
      // 获取所有频道
      const res = await allChannels()
      this.AllList = res.data.data.channels
      console.log(this.AllList)
      console.log(this.userList)
      // 减去已选频道
      const arr = [...this.AllList].filter(x => [...this.userList].every(y => y.id !== x.id))
      this.reChannels.push(...arr)
      console.log(this.reChannels)
    },
    // 编辑
    deleteChannel () {
      this.isDel = !this.isDel
    },
    // 删除频道
    del (index) {
      this.userList.splice(index, 1)
      delChannels({
        target: index
      })
    },
    // 添加频道
    add (index, item) {
      if (this.isDel) {
        this.reChannels.splice(index, 1)
        this.userList.push(item)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.index {
  box-sizing: border-box;
  position: relative;
  .channles{
    position: absolute;
    top: 10px;
    left: 10px;
    width: 30px;
    height: 30px;
    z-index: 999;
  }
  .channle{
    p{
      color: #646566;
      font-weight: 700;
      font-size: 16px;
      border-bottom: 1px solid #f3f4f6;
      line-height: 44px;
      margin: 0 @p12;
      span{
        color: #000;
        font-weight: 400;
        border: 1px solid #cccccc;
        float: right;
        height: 32px;
        width: 64px;
        text-align: center;
        line-height: 32px;
        margin-top: 5px;
        border-radius: 32px;
      }
    }
      ul{
      display: flex;
      flex-wrap: wrap;
      margin: 0 @p12;
      li{
        width: 25%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 14px;
        border-right: 1px solid #f3f4f6;
        border-bottom: 1px solid #f3f4f6;
        position: relative;
        i{
          position: absolute;
          right: 0;
          top: -15px;
          font-size: 12px;
        }
      }
    }
  }
  .content{
    // margin-bottom: 200px;
    .tabs {
      padding-bottom: 100px;
      height: 28px;
      width: 100%;
    }
  }
  .bottom{
    height: 100px;
    width: 100%;
  }
}
</style>
